<!-- 蓝色简洁登录页面 -->
<template>
	<view class="t-login">
		<!-- 页面装饰图片 -->
		<image class="img-a" src="@/static/login/2.png"></image>
		<image class="img-b" src="@/static/login/3.png"></image>
		<!-- 标题 -->
		<view class="t-b">{{ title }}</view>
		<view class="t-b2">欢迎使用小程序组件</view>

		<!-- 输入框 -->
		<form class="cl">
			<view class="t-a">
				<image src="@/static/login/sj.png" class="ta_image"></image>
				<view class="line"></view>
				<input type="number" name="phone" placeholder="请输入手机号" maxlength="11" v-model="loginForm.phoneNumber" />
				<view v-if="showPhoneError" class="error-message">请输入正确的手机号码格式</view>
			</view>
			
			<view class="t-a">
				<image src="@/static/login/password.svg" class="ta_image"></image>
				<view class="line"></view>
				<input type="safe-password" name="password" placeholder="请输入密码" v-model="loginForm.password" />
			</view>

			<view class="t-a" style="display: flex;align-items: center;">
				<image src="@/static/login/yz.png" class="ta_image"></image>
				<view class="line"></view>
				<input type="number" name="code" maxlength="6" placeholder="请输入验证码" v-model="loginForm.code" />
				<image :src="codeUrl" @click="getCode" class="login-code-img" v-if="captchaEnabled"></image>
				<!-- 		<view v-if="showText" class="t-c" @tap="sendSMS()">发送短信</view>
				<view v-else class="t-c" style="background-color: #A7A7A7;">重新发送({{ second }})</view> -->
			</view>
			<button @tap="login()">登 录</button>
		</form>


		<view class="t-f"><text>————— 微信账号一键登录 —————</text></view>
		<view class="t-e cl">
			<view class="t-g" @tap="wxLogin">
				<image src="@/static/login/wx.png"></image>
			</view>
		</view>


		<!-- 隐私政策 -->
		<view class="viewXuan" style="margin-top: 150rpx;" :class="shaking ? 'shake' : ''">
			<!-- 	<checkbox-group @change="xuanBtns">
				<label>
					<checkbox :checked="loShow" />
				</label>
			</checkbox-group> -->
			<image class="xuan" :src="loShow ? '../../static/login/xuan.png' : '../../static/login/xuan1.png'"
				@click="xuanBtns">
			</image>
			<view class="f_22" style="color: #adadad;z-index: 999;">
				<span @click.stop="xuanBtns" style="color: rgba(56, 56, 56, 1);margin-left: 10rpx;">我已阅读并同意</span>
				<span style="color: #5677FC" @click.stop="openContract('agreement')">《用户协议》</span>
				<span style="color: rgba(56, 56, 56, 1)">及</span>
				<span style="color: #5677FC" @click.stop="openContract('privacy')">《隐私政策》</span>
			</view>
		</view>


	</view>
</template>
<script>
	import {
		getCodeImg
	} from '@/api/login'
	export default {
		data() {
			return {
				title: '欢迎回来！', //填写logo或者app名称，也可以用：欢迎回来
				second: 60, //默认60秒
				showText: true, //判断短信是否发送
				phone: '', //手机号码
				yzm: '', //验证码
				showPhoneError: false,
				loShow: false, //是否同意隐私政策
				shaking: false, //隐私协议提示左右晃动
				bind_phone: false, //绑定手机号码弹层是否显示

				codeUrl:'',
				captchaEnabled: true,//验证码开关
				loginForm: {
					phoneNumber: "",
					password: "",
					code: "",
					uuid: ''
				}
			}
		},
		//监听手机号码
		watch: {
			'loginForm.phoneNumber': {
				handler(newPhone) {
					if (newPhone.trim() !== '') {
						// 执行手机号码格式验证的逻辑
						if (!/^1[0-9]{10}$/.test(newPhone)) {
							this.showPhoneError = true;
						} else {
							this.showPhoneError = false;
						}
					} else {
						this.showPhoneError = false;
					}
				},
				immediate: true
			}
		},
		onLoad() {
			
		},
		onShow() {
			this.getCode();
		},
		methods: {
			/**
			 * 获取验证码
			 */
		    getCode() {
		      getCodeImg().then(res => {
		        this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled;
		        if (this.captchaEnabled) {
		          this.codeUrl = "data:image/gif;base64," + res.img;
		          this.loginForm.uuid = res.uuid;
		        }
		      });
		    },
			/**
			 * 同意隐私政策
			 */
			xuanBtns() {
				this.loShow = !this.loShow
			},
			/**
			 * 跳转到隐私政策
			 */
			openContract(e) {
				console.log("查看隐私政策", e);
			},
			/**
			 * 当前登录按钮操作
			 */
			login() {
				var that = this;
				//如果没有勾选隐私协议
				if (!that.loShow) {
					that.shaking = true
					setTimeout(() => {
						that.shaking = false
					}, 1000)
					return;
				}

				if (!that.loginForm.phoneNumber) {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					});
					return;
				}
				if (!/^[1][3,4,5,7,8,9][0-9]{9}$/.test(that.phone)) {
					uni.showToast({
						title: '请输入正确手机号',
						icon: 'none'
					});
					return;
				}
				if (!that.yzm) {
					uni.showToast({
						title: '请输入验证码',
						icon: 'none'
					});
					return;
				}
				//....此处省略，这里需要调用后台验证一下验证码是否正确，根据您的需求来
				uni.setStorageSync('token', "JKFSAFBSAKSJADSA");
				uni.setStorageSync('version', "2");
				uni.redirectTo({
					url: '/pages/index/tabbar'
				});
				uni.showToast({
					title: '登录成功！',
					icon: 'none'
				});
			},
			/**
			 * 暂定-获取短信验证码
			 */
			sendSMS() {
				var that = this;
				var interval = setInterval(() => {
					that.showText = false;
					var times = that.second - 1;
					//that.second = times<10?'0'+times:times ;//小于10秒补 0
					that.second = times;
					console.log(times);
				}, 1000);
				setTimeout(() => {
					clearInterval(interval);
					that.second = 60;
					that.showText = true;
				}, 60000);
				//这里请求后台获取短信验证码
				uni.request({
					//......//此处省略
					success: function(res) {
						that.showText = false;
					}
				});
			},
			/**
			 * 第三方微信一键登录
			 */
			wxLogin(e) {
				let that = this;
				//如果没有勾选隐私协议
				if (!that.loShow) {
					that.shaking = true
					setTimeout(() => {
						that.shaking = false
					}, 1000)
					return;
				}
				uni.getUserProfile({
					desc:'登录后同步数据',
					success(user) {
						uni.login({
							success(lres) {
								let params = {
									code:lres.code
								}
								//todo 调用后端uniapp登录接口
							}
						})
					}
				})
				//todo显示手机号登录的弹层
				// uni.showToast({
				// 	title: '微信登录',
				// 	icon: 'none'
				// });


				// uni.request({
				// 	url: 'http://localhost:8080/wxLoginApi/demo',
				// 	header: {
				// 		"Content-Type": "application/json",
				// 	},
				// 	method: 'GET',
				// 	success: res => {
				// 		console.log("请求成功=======》", res);
				// 	},
				// 	fail: err => {
				// 		uni.hideLoading()
				// 		uni.showToast({
				// 			title: '绑定失败',
				// 			icon: 'none'
				// 		})
				// 	}
				// })
			},
		}
	};
</script>
<style>
	.img-a {
		position: absolute;
		width: 100%;
		top: -150rpx;
		right: 0;
	}

	.img-b {
		position: absolute;
		width: 50%;
		bottom: 0;
		left: -50rpx;
		margin-bottom: -200rpx;
	}

	.t-login {
		width: 650rpx;
		margin: 0 auto;
		font-size: 28rpx;
		color: #000;
	}

	.t-login button {
		font-size: 28rpx;
		background: #5677fc;
		color: #fff;
		height: 90rpx;
		line-height: 90rpx;
		border-radius: 50rpx;
		box-shadow: 0 5px 7px 0 rgba(86, 119, 252, 0.2);
	}

	.t-login input {
		padding: 0 20rpx 0 120rpx;
		height: 90rpx;
		line-height: 90rpx;
		margin-bottom: 50rpx;
		background: #f8f7fc;
		border: 1px solid #e9e9e9;
		font-size: 28rpx;
		border-radius: 50rpx;
	}

	.t-login .t-a {
		position: relative;
	}

/* 	.t-login .t-a image {
		width: 40rpx;
		height: 40rpx;
		position: absolute;
		left: 40rpx;
		top: 28rpx;
		border-right: 2rpx solid #dedede;
		margin-right: 20rpx;
	} */
	.ta_image{
		width: 40rpx;
		height: 40rpx;
		position: absolute;
		left: 40rpx;
		top: 28rpx;
		/* border-right: 2rpx solid #dedede; */
		margin-right: 20rpx;
	}

	.t-login .t-a .line {
		width: 2rpx;
		height: 40rpx;
		background-color: #dedede;
		position: absolute;
		top: 28rpx;
		left: 98rpx;
	}

	.t-login .t-b {
		text-align: left;
		font-size: 46rpx;
		color: #000;
		padding: 300rpx 0 30rpx 0;
		font-weight: bold;
	}

	.t-login .t-b2 {
		text-align: left;
		font-size: 32rpx;
		color: #aaaaaa;
		padding: 0rpx 0 50rpx 0;
	/* 	display: flex;
		height: 120rpx;
		font-size: 40rpx;
		align-items: center;
		justify-content: center;
		font-weight: bold;
		background-image: url(https://s1.ax1x.com/2020/09/16/wccswF.png);
		background-size: cover;
		background-image: -webkit-linear-gradient(0deg, #ff8a34, #FBBD12);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent; */
	}

	.t-login .t-c {
		position: absolute;
		right: 22rpx;
		top: 22rpx;
		background: #5677fc;
		color: #fff;
		font-size: 24rpx;
		border-radius: 50rpx;
		height: 50rpx;
		line-height: 50rpx;
		padding: 0 25rpx;
		/* 	此处为绝对定位,设置元素的堆叠顺序的属性。当一个元素的 z-index 值为负数时，
		它会被放置在其他元素的后面，即在堆叠顺序上处于较低的位置。这意味着其他具有正 z-index 值的元素会在其上方显示。设置为9999为了该元素在最上层，点击按钮不会失效 */
		z-index: 9999;
	}

	.t-login .error-message {
		color: red;
		font-size: 24rpx;
		position: absolute;
		top: 90rpx;
		left: 15rpx;

	}

	.t-login .t-d {
		text-align: center;
		color: #999;
		margin: 80rpx 0;
	}

	.t-login .t-e {
		text-align: center;
		width: 250rpx;
		margin: 80rpx auto 0;
	}
	
	.t-login .t-e image {
		width: 50rpx;
		height: 50rpx;
	}

	.t-login .t-f {
		text-align: center;
		margin: 200rpx 0 0 0;
		color: #666;
	}

	.t-login .t-f text {
		margin-left: 20rpx;
		color: #aaaaaa;
		font-size: 27rpx;
	}

	.t-login .uni-input-placeholder {
		color: #000;
	}

	.cl {
		zoom: 1;
	}

	.cl:after {
		clear: both;
		display: block;
		visibility: hidden;
		height: 0;
		content: '\20';
	}

	.viewXuan {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 30rpx;
		line-height: 30rpx;
	}

	/deep/ checkbox .wx-checkbox-input,
	checkbox .uni-checkbox-input {
		border-radius: 50% !important;
		height: 36rpx;
		width: 36rpx;
	}

	/deep/ checkbox .wx-checkbox-input.wx-checkbox-input-checked {
		color: #fff;
		background: #5677FC;
		border-color: #5677FC;
	}

	.xuan {
		width: 30rpx;
		height: 30rpx;
		margin-right: 10rpx;
	}

	.f_22 {
		margin-top: 4rpx;
		font-size: 24rpx;
	}

	.shake {
		animation: shake 0.5s ease-in-out;
		animation-iteration-count: 2;
		/* 摇晃两次 */
		animation-fill-mode: forwards;
		/* 保持动画结束的状态 */

	}

	/* 	@keyframes shake {
			10%, 90% { transform: translate3d(-1px, 0, 0); }
			20%, 80% { transform: translate3d(+2px, 0, 0); }
			30%, 70% { transform: translate3d(-4px, 0, 0); }
			40%, 60% { transform: translate3d(+4px, 0, 0); }
			50% { transform: translate3d(-4px, 0, 0); }
	} */

	@keyframes shake {
		0% {
			transform: translateX(0);
		}

		25% {
			transform: translateX(-5px);
		}

		50% {
			transform: translateX(5px);
		}

		75% {
			transform: translateX(-5px);
		}

		100% {
			transform: translateX(0);
		}
	}

	.login-code-img {
		height: 90rpx;
		position: absolute;
		right: 0;
		width: 200rpx;
		line-height: 90rpx;
		margin-bottom: 50rpx;
		border-radius: 10rpx;
	}
</style>